import React, { useRef } from 'react';
import KPageHeader from '@/components/KPageHeader';
import { Card, Col, message, Popconfirm, Row, Tabs } from 'antd';
import { useRequest } from 'ahooks';
import { apiSystemUsers } from '@/api/system/users.api';
import { PageLoading } from '@ant-design/pro-layout';
import styles from './style.module.less';
import { SystemEditUser } from '@/pages/system/users/edit';
import { ActionType, ProColumnType } from '@ant-design/pro-table';
import { apiRole } from '@/api/system/roles.api';
import { history } from '@@/core/history';
import KTable from '@/components/KTable';
import { useParams } from 'react-router-dom';

// 角色管理
const RolesList = (props: { user?: API.Users }) => {
  const table = useRef<ActionType>();
  const { run: deleteUsers } = useRequest(apiRole.deleteUsers, {
    manual: true,
    onSuccess: () => {
      table.current?.reload();
      message.success('操作成功');
    },
  });
  const columns: ProColumnType<API.Users>[] = [
    {
      title: '角色名称',
      render: (_, record) => (
        <>
          <a onClick={() => history.push(`/system/roles/${record.id}`)}>
            {record.username}
          </a>
          <div>{record.nickname}</div>
        </>
      ),
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '绑定时间',
      dataIndex: 'created_at',
    },
    {
      title: '操作',
      align: 'right',
      render: (_, record) => (
        <>
          <Popconfirm
            title={'确定取消绑定?'}
            onConfirm={() => deleteUsers(record.id, [props.user?.id ?? 0])}
          >
            <a>取消绑定</a>
          </Popconfirm>
        </>
      ),
    },
  ];
  return (
    <KTable
      rowKey={'id'}
      actionRef={table}
      request={p => {
        return apiRole.getUsers(props.user?.id ?? 0, p);
      }}
      size={'small'}
      columns={columns}
      search={false}
    />
  );
};

// 拥有的权限
const PermissionsList = (props: { user?: API.Users }) => {
  const table = useRef<ActionType>();
  const { run: deleteUsers } = useRequest(apiRole.deleteUsers, {
    manual: true,
    onSuccess: () => {
      table.current?.reload();
      message.success('操作成功');
    },
  });
  const columns: ProColumnType<API.UserPermission>[] = [
    {
      title: '权限名称',
      render: (_, record) => (
        <>
          <div>{record.name}</div>
        </>
      ),
    },
    {
      title: '备注',
      dataIndex: 'title',
    },
    {
      title: '授权时间',
      dataIndex: 'created_at',
    },
  ];
  return (
    <KTable
      rowKey={'id'}
      actionRef={table}
      request={p => {
        return apiRole.getPermissions(props.user?.id ?? 0, p);
      }}
      size={'small'}
      columns={columns}
      search={false}
    />
  );
};

export default () => {
  const { id } = useParams<{ id: string }>();
  const { data, loading } = useRequest(apiSystemUsers.getInfo, {
    defaultParams: [Number(id)],
  });
  return (
    <>
      <KPageHeader title={'管理员信息'} />

      {loading ? (
        <PageLoading />
      ) : (
        <Card>
          <h4 className={styles.infoTitle}>
            用户基本信息
            <SystemEditUser user={data} />
          </h4>

          <Row className={styles.infoRow}>
            <Col span={12}>
              登录名称：
              {data?.username}
            </Col>

            <Col span={12}>
              UID：
              {data?.id}
            </Col>

            <Col span={12}>
              显示名称：
              {data?.nickname}
            </Col>

            <Col span={12}>创建时间： 2012-12-12 xx:xx:xx</Col>

            <Col span={24}>备注： x</Col>
          </Row>

          <Tabs
            defaultActiveKey={'users'}
            type={'card'}
            style={{ marginTop: 30 }}
          >
            <Tabs.TabPane tab={'绑定的角色'} key={'users'}>
              <RolesList user={data} />
            </Tabs.TabPane>

            <Tabs.TabPane tab={'权限管理'} key={'permission'}>
              <PermissionsList user={data} />
            </Tabs.TabPane>
          </Tabs>
        </Card>
      )}
    </>
  );
};
